<template>
  <div class="projectHeader">
    <project-header-top></project-header-top>
    <div class="center">
      <!--中间的头像区域-->
      <div class="follow floatLeft">
        <span class="block cricle"></span>
        <span class="block">By Steve Lloyd</span>
        <span class="block">First created</span>
        <button>Follow</button>
      </div>
      <!--标题部分-->
      <div class="chroma floatLeft">
        <span class="block">Chroma - The unique, 4x5technical camera</span>
        <span class="block">Chroma is a unique large format technical field camera, built from laser cut acrylic and available in a selection of colours.</span>
      </div>
      <div class="clear"></div>
      <!--播放器部分-->
      <div class="video floatLeft">
        <video></video>
        <button>PLAY</button>
      </div>
      <!--信息部分-->
      <div class="message floatLeft">
        <span class="money block">$46,854</span>
        <span class="pledged block">pledged of $13,907 goal</span>
        <span class="block">143</span>
        <span class="backers block">backers</span>
        <span class="block">16</span>
        <span class="days block">days to go</span>
        <button class="back">Back this project</button>
        <button class="remind">Remind me</button>
        <span class="null lineBlock"></span><span class="null lineBlock"></span><span class="null lineBlock"></span><span class="null lineBlock"></span>
        <span class="message-text block"><a>All or nothing.</a>This project will only be funded if it reaches its goal by Sun, March 11 2018 6:53PM AWST</span>
      </div>
      <div class="clear"></div>
      <ul>
        <li>Project WeLove</li>
        <li>Photography</li>
        <li>Wirral Metropolitan Borough,UK</li>
      </ul>
    </div>
    <!--菜单栏-->
    <div class="menu">
      <ul>
        <li v-for="(item,key) in liLst" @click="liClick(key)" :class="{ liBorder:isBorder[key] }">{{item.li}}<sup>{{item.supNum}}</sup></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import projectHeaderTop from '../publicCom/ProjectHeaderTop'

    export default {
        name: "project-header",
        components:{ projectHeaderTop },
        props:[ 'isBorder' ],
        data(){
            return{
              liLst:[ { li:'Campaign', supNum:'' }, { li:'FAQ', supNum:'2' }, { li:'Updates', supNum:'6' }, { li:'Comments', supNum:'25' }, { li:'Community', supNum:'' } ]
            }
        },
        methods:{
          liClick(key){
            if(key == 0){
              this.$router.push({path:'/projectDetailsCampaign'});
            }
            if(key == 1){
              this.$router.push({path:'/projectDetallsFaq'});
            }
            if(key == 2){
              this.$router.push({path:'/projectDetailsUpdates'});
            }
            if(key == 3){
              this.$router.push({path:'/projectDetailsComments'});
            }
            if(key == 4){
              this.$router.push({path:'/projectDetailCommunity'});
            }
          } ,
        },
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .clear{clear: both}
  .block{display: block}
  .lineBlock{display: inline-block}
  .center {
    background: #FBFBFA;
    box-shadow: 0 1px 0 0 #DBDEDD;
    padding: 63px 0 79px 97px;
    margin: 0;
  }
  .follow{
    margin-right: 118px;
    .cricle{
      background: #D8D8D8;
      width: 51px;
      height: 51px;
      border-radius: 50%;
    }
    span{
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666666;
      letter-spacing: -0.2px;
    }
    span:nth-child(2){
      color: #2E2E2E;
      margin: 20px 0 1px 0;
    }
    button{
      outline: none;
      border: none;
      background: #E8E8E8;
      width: 64px;
      height: 36px;
      margin: 15px 0 66px 0;
    }
  }
  .chroma{
    width:740px;
    color: #2E2E2E;
    font-family: PingFangSC-Regular;
    span:nth-child(1){
      font-size: 36px;
      letter-spacing: 0.2px;
      line-height: 50px;
      margin-bottom: 24px;
    }
    span:nth-child(2){
      font-size: 18px;
      letter-spacing: -0.2px;
      line-height: 28px;
    }
  }
  .video{
    width: 818px;
    height: 460px;
    background: #D8D8D8;
    position: relative;
    video{
      width: 818px;
      height: 460px;
    }
    button{
      background: #282828;
      border: 3px solid #FFFFFF;
      width: 104px;
      height: 54px;
      padding-left:44px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FFFFFF;
      box-sizing: border-box;
      position: absolute;
      top:202px;
      left: 357px;
    }
  }
  .message{
    width:388px;
    border-top: 4px solid #459B76;
    margin-left: 37px;
    span{
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #2E2E2E;
    }
    .money{
      color: #317260;
      margin: 22px 0 3px 0;
    }
    .pledged{
      font-size: 14px;
      color: #666666;
      margin-bottom: 16px;
    }
    .backers{
      font-size: 14px;
      color: #666666;
      margin: 3px 0 15px 0;
    }
    .days{
      font-size: 14px;
      color: #666666;
      margin: 3px 0 37px 0;
      margin-bottom: 37px;
    }
    button{
      outline: none;
      border: none;
    }
    .back{
      background: #459B76;
      width: 388px;
      height: 58px;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: -0.2px;
      margin-bottom: 21px;
    }
    .remind{
      width: 196px;
      height: 50px;
      background: #FFFFFF;
      border: 1px solid #DBDEDD;
      font-size: 14px;
      letter-spacing: -0.2px;
      margin-right: 5px;
      vertical-align: middle;
    }
    .null{
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin: 0;
      border: 1px solid #979797;
      margin-left: 28px;
    }
    .message-text{
      font-size: 12px;
      line-height: 21px;
      margin-top: 35px;
      a{border-bottom: 2px solid #D8D8D8;}
    }
  }
  ul{
    padding-top:26px;
    li{
      margin-right: 57px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #2E2E2E;
      list-style: none;
      display: inline-block;
      padding-left: 14px;
    }
  }
  .menu{
    ul{
      height: 75px;
      padding: 0;
      margin: 0;
      background: #FFFFFF;
      box-shadow: 0 -1px 0 0 #DBDEDD;
      padding-left: 176.5px;
      border-bottom: 1px solid #dbdedd;
      .liBorder{
        border-bottom:3px solid #2E2E2E;
      }
      /*li:nth-child(1){*/
        /*border-bottom:3px solid #2E2E2E;*/
      /*}*/
      li{
        padding: 0 27.5px;
        display: inline-block;
        line-height: 67px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #2E2E2E;
        letter-spacing: -0.2px;
        sup{
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #459B76;
          letter-spacing: -0.17px;
          margin-left: 4px;
        }
      }
    }
  }
</style>
